<div id="{{tournament.id}}-{{event.id}}-{{round.roundNum}}-everything">
<script>
    $(".sameFencer").css("background-color", "black");
    function newAjax()
    {
        $.ajax({
            url: "/bouting/{{tournament.id}}/{{event.id}}/{{round.id}}/poolView/",
            dataType : "text",
            success: function(data) {
                $("#{{tournament.id}}-{{event.id}}-{{round.roundNum}}-everything").html(data);
            },
            error: function(data, c, u) {
                //alert(c);
                //$("#everything").html(data);
            }
});
    }
    
    $("#{{tournament.id}}-{{event.id}}-{{round.roundNum}}-myForm").submit(function() {
    //xhr.setRequestHeader('X-CSRF-Token', csrf_token);
    //var data = {'csrfmiddlewaretoken': '{{ csrf_token }}'};
    var data = $('#{{tournament.id}}-{{event.id}}-{{round.roundNum}}-myForm').serialize();
    $.post("/bouting/{{tournament.id}}/{{event.id}}/{{round.id}}/editBout/", data); // do the necessary post here
    newAjax();
    return false; // Do not submit the form
});
    
var csrf_token = '<%= token_value %>';
</script>
{% for pool in poolList %}
    <h2>Pool {{pool.number}}</h2>
    <table border="1" cellPadding="10">
        <tr>
            <th>Name</th>
            <th>#</th>
            {%for fencer in pool.getFencers %}
                <th>{{fencer.number}}</th>
            {% endfor %}
            <th>V%</th>
            <th>V</th>
            <th>D</th>
            <th>Ind</th>
            <th>TS</th>
            <th>TR</th>
            <th>Pl</th>
        </tr>
        {% for fencerA in pool.getFencers %}
            <tr>
                <!--Fencer Identity-->
                <td>{{fencerA.identity}}</td>
                
                <!--Fencer Number-->
                <td>{{fencerA.number}}</td>
                
                <!--Bout Entries-->
                {% for fencerB in pool.getFencers %}
                    {% if fencerA == fencerB %}
                        <td class="sameFencer"></td>
                    {% else %}
                        <td id='{{pool.id}}-{{fencerA.id}}-{{fencerB.id}}' class='bout'></td>
                    {% endif %}
                {% endfor %}
                <td id='{{pool.id}}-{{fencerA.id}}-VP'>{{fencerA.getVP|floatformat:2}}</td>
                <td id='{{pool.id}}-{{fencerA.id}}-V'>{{fencerA.getV}}</td>
                <td id='{{pool.id}}-{{fencerA.id}}-D'>{{fencerA.getD}}</td>
                <td id='{{pool.id}}-{{fencerA.id}}-Ind'>{{fencerA.getInd}}</td>
                <td id='{{pool.id}}-{{fencerA.id}}-TS'>{{fencerA.getTS}}</td>
                <td id='{{pool.id}}-{{fencerA.id}}-TR'>{{fencerA.getTR}}</td>
                <td id='{{pool.id}}-{{fencerA.id}}-Pl'></td>
            </tr>
        {% endfor %}
    </table>
    
    <script>
        {% for bout in pool.getBouts %}
            $("#{{pool.id}}-{{bout.leftFencer.id}}-{{bout.rightFencer.id}}").html("{{bout.formatLeftScore}}");
            $("#{{pool.id}}-{{bout.rightFencer.id}}-{{bout.leftFencer.id}}").html("{{bout.formatRightScore}}");
        {% endfor %}
    </script>
    
{% if canEdit %}
<fieldset style="width:10px;">
    <legend>Enter Scores</legend>
    <form id="{{tournament.id}}-{{event.id}}-{{round.roundNum}}-myForm" action="/bouting/{{tournament.id}}/{{event.id}}/{{round.id}}/editBout/" method="post">
    {% csrf_token %}
    
    <select name="bout" id="bout">    
        {% for bout in pool.getBouts%}
            <option value='{{bout.id}}'>
            {%if bout.finished%}
                <del>
            {%endif%}
            {{bout.leftFencer}}-{{bout.rightFencer}}
            {%if bout.finished%}
                </del>
            {%endif%}
            </option>
        {% endfor %}
    </select>
    <input name="{{tournament.id}}-{{event.id}}-{{round.roundNum}}-leftScore" id="{{tournament.id}}-{{event.id}}-{{round.roundNum}}-leftScore" type="text" size="1"></input>
    -
    <input name="{{tournament.id}}-{{event.id}}-{{round.roundNum}}-rightScore" id="{{tournament.id}}-{{event.id}}-{{round.roundNum}}-rightScore" type="text" size="1"></input>
    <input name="done" id="done" type="checkbox" checked="checked"></input>Completed?
    <input type="submit" value="Enter"></input>
    
    <form>
</fieldset>
{% endif %}
{% endfor %}
<!--<button type="button" onclick=newAjax() value="bleh">Do Cool Shit</button>-->

</div>